import {
  Component,
  Injector,
  ElementRef,
  ViewChild,
  OnInit,
} from "@angular/core";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { AppComponentBase } from "@shared/common/app-component-base";
import {
  DemoOneServiceProxy,
  PrepareDto,
  CenterCharDemoDto,
  RightBottomCharDemoDto,
} from "@shared/service-proxies/service-proxies";
import { any } from "codelyzer/util/function";
import * as echarts from "echarts";
@Component({
  templateUrl: "./demo4.component.html",
  styleUrls: ["./demo4.component.less"],
  animations: [appModuleAnimation()],
})
export class Demo4Component extends AppComponentBase implements OnInit {
  @ViewChild("DatePicker") datePicker: ElementRef;
  saving = false;
  isshow = false;
  monthlyPlanCount=200;
  monthlyPlanProductionCount=100;
  constructor(
    injector: Injector,
    private _demoOneService: DemoOneServiceProxy
  ) {
    super(injector);
  }

  ngOnInit(): void {
    this.leftNews();
    this.zb1();
    this.zb2();
    this.zb3();
    this.centerChar();
    this.leftTopChar2();
    this.letfBottomChar();
    this.letfBottomChar7();
    this.rightBottomChar();
    this.leftTopChar();
    this.leftTopChar3();
    
  }
  ngAfterViewInit() {
    
  }
  init() {
  }
  zb1() {
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#62c98d", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },

          data: [
            { value: 5, name: "已准备" },
            { value: 10, name: "未准备" },
          ],
        },
      ],
    };
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb1"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  zb2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb2"));
    
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#c98b62", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 10, name: "已准备" },
            { value: 20, name: "未准备" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  zb3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("zb3"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: ["#00b7be", "#999"],
      series: [
        {
          name: "准备情况",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 12, name: "已准备" },
            { value: 20, name: "未准备" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    //myChart.clear();
  }

  centerChar() {
    var myChart = echarts.init(document.getElementById("chart1"));
    var option = {
      /*backgroundColor: '#05163B',*/
      tooltip: {
        trigger: "axis",
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true,
          },
          dataView: {
            show: true,
            readOnly: false,
          },
          magicType: {
            show: true,
            type: ["line", "bar"],
          },
          restore: {
            show: true,
          },
          saveAsImage: {
            show: true,
          },
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "0%",
        containLabel: true,
      },
      legend: {
        data: ["固定", "力争", "在制", "补充", "急件", "总计"],
        textStyle: {
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac", //X轴文字颜色
            },
          },
        },
      ],
      yAxis: [
        {
          min: 0,
          max: 1000,
          type: "value",
          name: "条数",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#444"],
              width: 1,
              type: "solid",
            },
          },
        },
      ],
      series: [
        {
          name: "固定",
          type: "bar",

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          data: [
            213,
            234,
            258,
            275,
            292,
            288,
            278,
            266,
            332,
            350,
            381,
            366,
            261,
            155,
            350,
            242,
            322,
            292,
            332,
            242,
            272,
            222,
            196,
          ],
        },
        {
          name: "力争",
          type: "bar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2f89cf",
                },
                {
                  offset: 1,
                  color: "#2f89cf",
                },
              ]),
            },
          },
          data: [
            213,
            234,
            258,
            275,
            292,
            288,
            278,
            266,
            332,
            350,
            381,
            366,
            261,
            155,
            350,
            242,
            322,
            292,
            332,
            242,
            272,
            222,
            196,
          ],
        },
        {
          name: "在制",
          type: "bar",

          data: [
            133,
            144,
            158,
            165,
            172,
            188,
            198,
            186,
            172,
            150,
            141,
            136,
            121,
            145,
            150,
            162,
            172,
            182,
            192,
            102,
            182,
            152,
            126,
          ],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#C1B2EA",
                },
                {
                  offset: 1,
                  color: "#8362C6",
                },
              ]),
            },
          },
        },
        {
          name: "补充",
          type: "bar",
          data: [
            223,
            354,
            228,
            275,
            282,
            348,
            358,
            216,
            332,
            230,
            221,
            266,
            341,
            415,
            330,
            222,
            312,
            282,
            172,
            262,
            352,
            242,
            336,
          ],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#62c98d",
                },
                {
                  offset: 1,
                  color: "#62c98d",
                },
              ]),
            },
          },
        },
        {
          name: "急件",
          type: "bar",
          data: [
            123,
            154,
            128,
            175,
            182,
            148,
            158,
            116,
            132,
            130,
            121,
            166,
            141,
            115,
            130,
            122,
            112,
            182,
            172,
            162,
            152,
            142,
            136,
          ],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5085f2",
                },
                {
                  offset: 1,
                  color: "#5085f2",
                },
              ]),
            },
          },
        },
        {
          name: "总计",
          type: "line",
          //yAxisIndex: 1,
          data: [
            264,
            287,
            707,
            756,
            822,
            487,
            588,
            160,
            323,
            303,
            213,
            663,
            413,
            153,
            303,
            223,
            123,
            823,
            723,
            623,
            523,
            423,
            366,
          ],
          lineStyle: {
            normal: {
              width: 5,

              shadowColor: "rgba(71,216,190, 0.5)",
              shadowBlur: 10,
              shadowOffsetY: 7,
            },
          },
          itemStyle: {
            normal: {
              color: "#F7AD3E",
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
              borderColor: "#F7AD3E",
            },
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  leftNews() {
    var c = 0;
    var timer = setInterval(function () {
      c++;
      if (c == 10) {
        $(".myscroll ul").css({ top: "0px" });
        c = 1;
      }
      var t = c * -35;
      $(".myscroll ul")
        .stop()
        .animate({ top: t + "px" }, 5000);
    }, 5000);
    //this.clearArr.push(timer);
  }

  letfBottomChar() {
    var myChart = echarts.init(document.getElementById("chart2"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      // legend: {
      //   orient: "vertical",
      //   left: "left",
      // },
      series: [
        {
          name: "班组任务",
          type: "pie",
          radius: "50%",
          center: ["50%", "35%"],
          data: 
          [

            { value: 0.25, name:'1组' , itemStyle: { color: "#0066FF" } },
            { value: 0.25, name:'2组' , itemStyle: { color: "#33FFCC" } },
            {value: 0.3, name:'3组' , itemStyle: { color: "#CC9900" } },
            { value: 0.1, name:'4组' , itemStyle: { color: "#FF3366" } },
            { value: 0.1, name:'5组' , itemStyle: { color: "#3399FF" } },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  letfBottomChar7() {
    var myChart = echarts.init(document.getElementById("chart7"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },

      series: [
        {
          type: "pie",
          radius: [20, 100],
          center: ["50%", "35%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 5,
          },
          label: {
            show: true,
          },
          emphasis: {
            label: {
              show: true,
            },
          },
          data: 
          [
            { value: 40, name: "CZ-5" },
            { value: 33, name: "CZ-3" },
            { value: 28, name: "CZ-5B" },
            { value: 22, name: "CZ-7" },
            { value: 20, name: "CZ-7A" },
            { value: 15, name: "DY" },
          ],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    
  }
  rightBottomChar() {
    var myChart = echarts.init(document.getElementById("chart3"));
    var color = ["#5085f2", "#f2719a", "#57e7ec"];
    var option = {
      color: color,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        textStyle: {
          color: "#ffffff", //字体颜色
          fontSize: 16,
        },
        data: ["缺少工艺", "缺少工装", "缺少材料"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLine: {
          //这是x轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "category",
        data: ["CZ-5", "CZ-5B", "CZ-7", "CZ-7A", "CZ-3B", "CZ-8", "DY"],
        axisLine: {
          //这是y轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "缺少工艺",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          data: [320, 302, 301, 334, 390, 330, 320],
        },
        {
          name: "缺少工装",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "缺少材料",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    
  }
  leftTopChar() {
    var myChart = echarts.init(document.getElementById("chart4"));
    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "50%",
        containLabel: true,
      },
      series: [
        {
          name: "固定项",
          type: "gauge",
          min: 0,
          max: 1000,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value:50 }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    
  }
  leftTopChar2() {
    var myChart = echarts.init(document.getElementById("chart5"));

    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      series: [
        {
          name: "力争项",
          type: "gauge",
          min: 0,
          max: 1000,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value: 200 }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    
  }
  leftTopChar3() {
    var myChart = echarts.init(document.getElementById("chart6"));
    var option = {
      // backgroundColor: "#1b1b1b",
      tooltip: {
        formatter: "{a} <br/>{c} {b}",
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      series: [
        {
          name: "在制项",
          type: "gauge",
          min: 0,
          max: 1000,
          splitNumber: 7,
          // radius: "50%",
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0.33, "lime"],
                [0.66, "#1e90ff"],
                [1, "#ff4500"],
              ],
              width: 3,
              shadowColor: "#fff", //默认透明
              shadowBlur: 10,
            },
          },
          axisLabel: {
            // 坐标轴小标记
            fontWeight: "bolder",
            color: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 10,
          },
          detail: {
            backgroundColor: "rgba(30,144,255,0.8)",
            borderWidth: 1,
            // borderColor: "#fff",
            shadowColor: "#fff", //默认透明
            shadowBlur: 5,
            offsetCenter: [0, "50%"], // x, y，单位px
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              color: "#fff",
              fontSize: 14,
            },
          },
          data: [{ value: 20 }],
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
   
  }
  hiddentop() {
    this.isshow = false;
    $("header-bar").hide();
    $(".m-body").removeClass("m-body");
    $("footer-bar").hide();
  }
  showtop() {
    this.isshow = true;
    $("header-bar").show();
    $(".m-grid--desktop").addClass("m-body");
    $("footer-bar").show();
  }
}
